<template>
    <div>
        <div>
            <el-autocomplete
                    popper-class="my-autocomplete"
                    v-model="state"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    @select="handleSelect">
                <i
                        class="el-icon-edit el-input__icon"
                        slot="suffix"
                        @click="handleIconClick">
                </i>
                <template slot-scope="{ item }">
                    <div class="name">{{ item.value }}</div>
                    <span class="addr">{{ item.address }}</span>
                </template>
            </el-autocomplete>
            <el-button type="primary"  icon="el-icon-search" @click="handleSearch"></el-button>

            <el-button style="float: right; " type="text"  class="el-icon-plus" @click= "newProduct()" plain>新增商品</el-button>

        </div>
        <div>

            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="商品名称" label-width="150px">
                                <span>{{ props.row.name }}</span>
                            </el-form-item>
                            <el-form-item label="库存" label-width="150px">
                                <span>{{ props.row.number }}</span>
                            </el-form-item>
                            <el-form-item label="类型" label-width="150px">
                                <span>{{ props.row.catagory }}</span>
                            </el-form-item>
                            <el-form-item label="价格" label-width="150px">
                                <span>￥{{ props.row.money }}</span>
                            </el-form-item>
                            <el-form-item label="近一个月出售量" label-width="150px">
                                <span>{{ props.row.sellnumber }}</span>
                            </el-form-item>

                            <el-form-item label="物种" label-width="150px">
                                <span>{{ props.row.address }}</span>
                            </el-form-item>
                            <el-form-item label="商品描述" label-width="150px">
                                <span>{{ props.row.des }}</span>
                            </el-form-item>

                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="商品名"
                        prop="name">
                </el-table-column>
                <el-table-column
                        label="价格"
                        prop="money">
                </el-table-column>
                <el-table-column
                        label="库存"
                        prop="number">
                </el-table-column>
                <el-table-column
                        label="商品描述"
                        prop="des">
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作"
                        width="150px">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button icon="el-icon-delete" class="red" @click="handleDelete(scope.$index,scope.row)" type="text">删除</el-button>
                    </template>
                </el-table-column>
                <!-- 编辑用户信息 -->


            </el-table>

            <el-dialog title="新增商品" :visible.sync="newProVisible" width="40%">
                <el-form ref="form_1" :model="form_1" label-width="100px" >
                    <el-form-item label="商品名" >
                        <el-input v-model="form_1.name"></el-input>
                    </el-form-item>
                    <el-form-item label="价格" >
                        <el-input v-model="form_1.money"></el-input>
                    </el-form-item>
                    <el-form-item label="库存" >
<!--                        <el-input v-model="form.number"></el-input>-->
                        <el-input-number v-model="form_1.number" :min="0" :max="1000000000" label="描述文字"></el-input-number>
                    </el-form-item>
                    <el-form-item label="类型" >
<!--                        <el-input v-model="form_1.catagory"></el-input>-->
                        <el-select v-model="form_1.catagory" placeholder="请选择" @focus="changeSpecies_1">
                            <el-option key="BIRDS" label="BIRDS" value="BIRDS"></el-option>
                            <el-option key="CATS" label="CATS" value="CATS"></el-option>
                            <el-option key="DOGS" label="DOGS" value="DOGS"></el-option>
                            <el-option key="FISH" label="FISH" value="FISH"></el-option>
                            <el-option key="REPTILES" label="REPTILES" value="REPTILES"></el-option>

                        </el-select>
                    </el-form-item>

                    <el-form-item label="物种">
                        <template>
                             <el-select v-model="form_1.address" placeholder="请选择" @focus="chooseSpecies_1">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                     </el-option>
                              </el-select>
                        </template>


                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form_1.des"></el-input>
                    </el-form-item>

                </el-form>

                <span slot="footer" class="dialog-footer">
                <el-button @click="newProVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveProEdit">确 定</el-button>
            </span>
            </el-dialog>

            <el-dialog title="编辑" :visible.sync="editVisible" width="40%">
                <el-form ref="form" :model="form" label-width="100px" >
                    <el-form-item label="商品名" >
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="价格" >
                        <el-input v-model="form.money"></el-input>
                    </el-form-item>
                    <el-form-item label="库存" >
                        <el-input v-model="form.number"></el-input>
                    </el-form-item>
                    <el-form-item label="类型" >

                        <el-select v-model="form.catagory" placeholder="请选择" @focus="changeSpecies">
                            <el-option key="BIRDS" label="BIRDS" value="BIRDS"></el-option>
                            <el-option key="CATS" label="CATS" value="CATS"></el-option>
                            <el-option key="DOGS" label="DOGS" value="DOGS"></el-option>
                            <el-option key="FISH" label="FISH" value="FISH"></el-option>
                            <el-option key="REPTILES" label="REPTILES" value="REPTILES"></el-option>

                        </el-select>
                    </el-form-item>

                    <el-form-item label="物种">
                        <template>
                             <el-select v-model="form.address" placeholder="请选择" @focus="chooseSpecies">
                                    <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                     </el-option>
                              </el-select>
                        </template>

                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.des"></el-input>
                    </el-form-item>

                </el-form>

                <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
            </el-dialog>
        </div>
    </div>
</template>

<style>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .red {
        color: #ff0000;
    }


</style>
<style>
    .my-autocomplete {
    li {
        line-height: normal;
        padding: 7px;

    .name {
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .addr {
        font-size: 12px;
        color: #b4b4b4;
    }

    .highlighted .addr {
        color: #ddd;
    }
    }
    }
</style>

<script>
    export default {
        data() {
            return {
            options:[],
                restaurants: [],
                state: '',
                tableData: [],
                editVisible:false,
                newProVisible:false,
                form: {},
                form_1: {
                    number:'0'
                },
                idx: -1,
                id: -1
            }
        },
        created() {
            this.getData();
        },
        methods: {
            changeSpecies_1(){
                 this.form_1.address="";
            },
            changeSpecies(){
                 this.form.address="";
            },
            chooseSpecies(){
            if(this.form.catagory=="BIRDS"){
                                this.options=[];
                                this.options.push(
                                    {
                                        value:"Amazon Parrot",
                                        label:"Amazon Parrot",

                                    },
                                    {
                                        value:"Finch",
                                        label:"Finch"
                                    },

                                )
                            }
                            else if(this.form.catagory=="REPTILES"){
                                this.options=[];
                                this.options.push(
                                    {
                                        value:"lguana",
                                        label:"lguana",

                                    },
                                    {
                                        value:"Rattlesnake",
                                        label:"Rattlesnake"
                                    });

                            }
                            else if(this.form.catagory=="CATS"){
                                                             this.options=[];
                                                             this.options.push(
                                                                 {
                                                                     value:"Persian",
                                                                     label:"Persian",

                                                                 },
                                                                 {
                                                                     value:"Manx",
                                                                     label:"Manx"
                                                                 });

                             }else if(this.form.catagory=="FISH"){
                                    this.options=[];
                                    this.options.push(
                                    {
                                     value:"Koi",
                                     label:"Koi",

                                     },
                                       {
                                     value:"Anglefish",
                                     label:"Anglefish",

                                     },
                                        {
                                     value:"Tiger Shark",
                                     label:"Tiger Shark",

                                     },
                                     {
                                     value:"Goldfish",
                                     label:"Goldfish"
                                     });

                             }
                            else if(this.form.catagory=="DOGS"){
                                    this.options=[];
                                    this.options.push(
                                    {
                                     value:"Bulldog",
                                     label:"Bulldog",

                                     },
                                       {
                                     value:"Chihuahua",
                                     label:"Chihuahua",

                                     },
                                        {
                                     value:"Dalmation",
                                     label:"Dalmation",

                                     },
                                    {
                                     value:"Golden Retriever",
                                     label:"Golden Retriever",

                                     },
                                        {
                                     value:"Labrador Retriever",
                                     label:"Labrador Retriever",

                                     },
                                     {
                                     value:"Poodle",
                                     label:"Poodle"
                                     });

                             }

            },
        chooseSpecies_1(){
            if(this.form_1.catagory=="BIRDS"){
                                this.options=[];
                                this.options.push(
                                    {
                                        value:"Amazon Parrot",
                                        label:"Amazon Parrot",

                                    },
                                    {
                                        value:"Finch",
                                        label:"Finch"
                                    },

                                )
                            }
                            else if(this.form_1.catagory=="REPTILES"){
                                this.options=[];
                                this.options.push(
                                    {
                                        value:"lguana",
                                        label:"lguana",

                                    },
                                    {
                                        value:"Rattlesnake",
                                        label:"Rattlesnake"
                                    });

                            }
                            else if(this.form_1.catagory=="CATS"){
                                                             this.options=[];
                                                             this.options.push(
                                                                 {
                                                                     value:"Persian",
                                                                     label:"Persian",

                                                                 },
                                                                 {
                                                                     value:"Manx",
                                                                     label:"Manx"
                                                                 });

                            }else if(this.form_1.catagory=="FISH"){
                                    this.options=[];
                                    this.options.push(
                                    {
                                     value:"Koi",
                                     label:"Koi",

                                     },
                                       {
                                     value:"Anglefish",
                                     label:"Anglefish",

                                     },
                                        {
                                     value:"Tiger Shark",
                                     label:"Tiger Shark",

                                     },
                                     {
                                     value:"Goldfish",
                                     label:"Goldfish"
                                     });

                             }
                            else if(this.form_1.catagory=="DOGS"){
                                    this.options=[];
                                    this.options.push(
                                    {
                                     value:"Bulldog",
                                     label:"Bulldog",

                                     },
                                       {
                                     value:"Chihuahua",
                                     label:"Chihuahua",

                                     },
                                        {
                                     value:"Dalmation",
                                     label:"Dalmation",

                                     },
                                    {
                                     value:"Golden Retriever",
                                     label:"Golden Retriever",

                                     },
                                        {
                                     value:"Labrador Retriever",
                                     label:"Labrador Retriever",

                                     },
                                     {
                                     value:"Poodle",
                                     label:"Poodle"
                                     });

                             }

            },
            newProduct(){
                this.newProVisible=true;
            },
            //处理搜索
            handleSearch() {
                //不可为空
                if(this.state==""  ) {
                    //this.$message.warning("输入为空");
                    this.tableData=[];
                    this.getData();
                }
                else
                {
                    this.$axios
                        .post('/editProduct', {
                            quest: "searchbyProductname",
                            state:this.state
                        })
                        .then(successResponse => {
                            const str = successResponse.data;
                            this.searchResult(str);
                        })
                }
            },
            //返回搜索结果
            searchResult(str){
                this.tableData=[];
                let arr = new Array();
                arr=str.split(',');


                for(let i=0; i<arr.length; i++)
                {
                    let todoObj={
                        name: arr[i],
                        number:arr[++i],
                        money: arr[++i],
                        address:arr[++i],
                        sellnumber:arr[++i],
                        catagory:arr[++i],
                        des:arr[++i],

                    };

                    this.tableData .push(todoObj);
                }
            },
            //获取用户信息
            getData(){
                this.$axios
                    .post('/editProduct', {
                        quest: "getProduct"
                    })
                    .then(successResponse => {
                        // console.log(successResponse.data);
                        const str = successResponse.data;
                        let arr = new Array();
                        arr=str.split(',');
                        for(let i=0; i<arr.length; i++)
                        {
                            let todoObj={
                                name: arr[i],
                                number:arr[++i],
                                money: arr[++i],
                                address:arr[++i],
                                sellnumber:arr[++i],
                                catagory:arr[++i],
                                des:arr[++i],


                            };
                            this.tableData .push(todoObj);
                        }
                        for(let i=0; i<arr.length; i=i+7)
                        {
                            this.restaurants.push({
                                value:arr[i],
                                address:arr[i+3],

                            });
                        }

                    })
            },
            //编辑用户信息
            handleEdit(index, row) {

                this.idx = index;
                this.form = row;
                this.editVisible = true;
                console.log("aaa"+this.editVisible);
                this.$axios
                    .post('/editProduct', {
                          quest: "edit",
                          name:row.name

                 })
            },
            // 删除操作
            handleDelete(index, row) {
                // 二次确认删除
                this.$confirm('确定要删除吗？', '提示', {
                    type: 'warning'
                })

                    .then(() => {
                        console.log(row.name);
                        this.$axios
                            .post('/editProduct', {
                                quest: "del",
                                name:row.name
                            })
                            .then(successResponse => {
                                this.$message.success('删除成功');
                                this.tableData.splice(index, 1);
                            })

                    })
                    .catch(() => {});

            },
            saveProEdit(){
                console.log("a"+this.form_1);
                if(this.form_1.name==undefined||this.form_1.number==undefined||this.form_1.money==undefined
                    ||this.form_1.address==undefined||this.form_1.catagory==undefined||this.form_1.des==undefined){
                    this.$message.warning("不可为空");
                }
                else {
                    this.$axios
                        .post('/editProduct', {
                            quest: "newproduct",
                            name: this.form_1.name,
                            number: this.form_1.number,
                            money: this.form_1.money,
                            address: this.form_1.address,
                            catagory: this.form_1.catagory,
                            des: this.form_1.des,
                        })
                        .then(successResponse => {
                            if (successResponse.data == "newFail"){
                            this.$message.error("新增失败，已存在该商品");
                            }
                            if (successResponse.data == "newSuccess") {
                                this.newProVisible = false;
                                this.tableData .push({
                                    name: this.form_1.name,
                                    number: this.form_1.number,
                                    money: this.form_1.money,
                                    address: this.form_1.address,
                                    catagory: this.form_1.catagory,
                                    des: this.form_1.des,
                                    }
                                );
                                this.$message.success("新增产品成功");
                                this.form_1={};
                            }

                        })
                }
            },
            saveEdit(){
                if(this.form.name==""||this.form.number==""||this.form.money==""
                    ||this.form.address==""||this.form.sellnumber==""||this.form.catagory==""||this.form.des==""){
                    this.$message.warning("不可为空");
                }
                else{
                    this.$axios
                        .post('/editProduct', {
                            quest: "editProInfo",
                            name: this.form.name,
                            number:this.form.number,
                            money: this.form.money,
                            address:this.form.address,
                            sellnumber:this.form.sellnumber,
                            catagory:this.form.catagory,
                            des:this.form.des,
                        })
                        .then(successResponse => {
                            console.log(successResponse);
                            if(successResponse.data=="editSuccess"){
                                this.editVisible = false;
                                this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                                this.$set(this.tableData, this.idx, this.form);

                            }

                        })
                }

            },
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            loadAll() {
                return this.restaurants;
            },
            handleSelect(item) {
                console.log(item);
            },
            handleIconClick(ev) {
                console.log(ev);
            }
        },
        mounted() {
            this.restaurants = this.loadAll();
        },

    }
</script>